import 'babel-core/polyfill'
import React from 'react'
import director from 'director'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'

const store = configureStore();

class App extends React.Component {
    
    constructor (props) {
        super(props);
        this.state =  {
            route:'/',
            type:'normal',
            obj:{},
        };
    }

    componentDidMount () {
        var tthis = this,   
            routes = {
               '/:module': function(module) {tthis.routerHandle(module,'normal','')},
               '/:module/:type': function(module,type) {tthis.routerHandle(module,type,'')},
               '/:module/:type/:param': function(module,type,param) {tthis.routerHandle(module,type,param)},
               '/.*': function(module) {tthis.routerHandle('home','normal','')},
            };
        var router = director.Router(routes);
        router.init();
    }

    routerHandle (module,type,param) {     
        this.setState({
            route: module,
            type:type,
            param:param        
        });
    }

    getModuleName () {
        var moduleName,module = this.state.route;
        if (module == '/') {
            moduleName = 'Home';
        } else {
            var moduleA = module.substr(0,1).toUpperCase(),
                moduleB = module.substr(1);
            moduleName = moduleA+moduleB;
        }
        return moduleName;
    }

    render() {
        var moduleName = this.getModuleName(),
            Child = require('./containers/'+moduleName);

        console.log('moduleName:',moduleName);

        return (
            <Provider store={store}>
                <Child/>
            </Provider>
        )
      }
};

render(<App />, document.getElementById('root'));

